<template>
  <!-- 模版管理 -->
  <div class="filterContent">
    <a-form :model="filterForm" layout="inline">
      <a-form-item label="所属厂商：">
        <a-select
          v-model:value="filterForm.supplierId"
          class="formInput"
          placeholder="请选择"
          @change="changeSupplierType"
          allow-clear
        >
          <a-select-option
            v-for="item in supplierList"
            :value="item.supplierId"
            :key="item.supplierId"
          >
            {{ item.supplierShortName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="所属型号：">
        <a-select
          v-model:value="filterForm.supplierTypeId"
          class="formInput"
          placeholder="请选择"
          :disabled="!filterForm.supplierId"
          allow-clear
        >
          <a-select-option
            v-for="item in supplierTypeList"
            :value="item.id"
            :key="item.id"
          >
            {{ item.type }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="设备/器部件名称：">
        <a-input
          v-model:value="filterForm.deviceName"
          class="formInput"
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="状态：">
        <a-select
          v-model:value="filterForm.enable"
          class="formInput"
          placeholder="请选择"
          allow-clear
        >
          <a-select-option
            v-for="item in MODEL_STATUS_LIST"
            :value="item.value"
            :key="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-button type="primary" class="filterBtn" @click="handleFilter"
        >查询</a-button
      >

      <!-- 新增器部件暂时隐藏，待后续开发 -->
      <a-button type="primary" class="filterBtn greenBtn" @click="handleEquip"
        >新增</a-button
      >
      <!-- 新增器部件暂时隐藏，待后续开发 -->
    </a-form>
  </div>
  <div class="tableContent">
    <a-table
      :dataSource="tableData"
      :columns="columns"
      size="small"
      :scroll="{ x: 'max-content' }"
      @resizeColumn="handleResizeColumn"
      :pagination="false"
      :loading="tableLoading"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'enable'">
          {{ MODEL_STATUS_LIST[record.enable]?.label }}
        </template>

        <template v-if="column.key === 'handle'">
          <a-popconfirm
            ok-text="确认"
            cancel-text="取消"
            @confirm="confirmDel(record)"
          >
            <template #title> 是否确定删除该条数据？ </template>
            <a-button type="link" danger>删除</a-button>
          </a-popconfirm>
          <a-button type="link" @click="handleEdit(record)">编辑</a-button>
          <a-popconfirm
            ok-text="确认"
            cancel-text="取消"
            @confirm="confirmHandleModelStatus(record)"
          >
            <template #title>
              {{
                `是否确定${
                  record.enable === 1 ? "停用" : "启用"
                }该条器部件数据？`
              }}
            </template>
            <a-button type="link" danger>
              {{ record.enable === 1 ? "停用" : "启用" }}
            </a-button>
          </a-popconfirm>
          <a-button type="link" @click="handleTempData(record)"
            >查看参数</a-button
          >
        </template>
      </template>
    </a-table>
    <a-pagination
      v-model:current="filterForm.current"
      v-model:page-size="filterForm.size"
      :total="total"
      position="bottomRight"
      show-size-changer
      @change="getModelPage"
      :show-total="(total) => `总共 ${total} 条`"
    >
      <template #buildOptionText="props">
        <span>{{ props.value }}条/页</span>
      </template>
    </a-pagination>
  </div>
  <!-- 新增设备/器部件 -->
  <AddEquip
    :addEquipVisible="addEquipVisible"
    :supplierList="supplierList"
    :rowData="rowData"
    :isEdit="isEdit"
    @update:addEquipVisible="(val) => (addEquipVisible = val)"
    @getModelPage="getModelPage"
  />
  <!-- 模版参数 -->
  <TempData
    :tempDataVisible="tempDataVisible"
    :rowData="rowData"
    @update:tempDataVisible="(val) => (tempDataVisible = val)"
  />
</template>
<script setup>


import AddEquip from "./conpoments/addEquip.vue";
import TempData from "./conpoments/tempData.vue";
import { MODEL_STATUS_LIST } from "@/constants/stationConfig";

const router = useRouter();
const $api = inject("$api");
const filterForm = ref({
  supplierId: null,
  supplierTypeId: null,
  current: 1,
  size: 10,
});
const labelCol = { style: { width: "100px" } };
const total = ref();
const addEquipVisible = ref(false);
const tempDataVisible = ref(false);
const tableData = ref([]);
const isEdit = ref(false);
const rowData = ref({});
const columns = ref([
  {
    title: "设备/器部件名称",
    dataIndex: "deviceName",
    key: "deviceName",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "所属厂商",
    dataIndex: "supplierShortName",
    key: "supplierShortName",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "所属型号",
    dataIndex: "supplierTypeName",
    key: "supplierTypeName",
    width: 150,
    resizable: true,
    align: "center",
  },
  {
    title: "所属生产厂商",
    dataIndex: "producerName",
    key: "producerName",
    width: 120,
    resizable: true,
    align: "center",
  },
  {
    title: "类别",
    dataIndex: "modelTypeName",
    key: "modelTypeName",
    width: 140,
    resizable: true,
    align: "center",
  },
  {
    title: "状态",
    dataIndex: "enable",
    key: "enable",
    width: 160,
    resizable: true,
    align: "center",
  },
  {
    title: "模版名称",
    dataIndex: "modelName",
    key: "modelName",
    width: 120,
    resizable: true,
    align: "center",
  },

  {
    title: "操作",
    dataIndex: "handle",
    key: "handle",
    width: 220,
    resizable: true,
    align: "center",
    fixed: "right",
  },
]);
function handleResizeColumn(w, col) {
  col.width = w;
}
const handleEquip = () => {
  addEquipVisible.value = true;
  isEdit.value = false;
};

const confirmDel = async (data) => {
  const res = await $api.modelDel(data.id);
  if (res && res.code === 0) {
    message.success("删除成功");
    getModelPage();
  }
};
const supplierList = ref([]);
const supplierTypeList = ref([]);
const getSupplierTypeTree = async () => {
  const res = await $api.supplierTypeTree();
  supplierList.value = res.data;
};
const changeSupplierType = (id) => {
  filterForm.value.supplierTypeId = null;
  supplierTypeList.value =
    supplierList.value.filter((item) => item.supplierId === id)[0]
      ?.supplierTypeEntities || [];
  for (const item of supplierTypeList.value) {
    item.supplierTypeId = item.id;
  }
};
const handleTempData = (data) => {
  rowData.value = data;
  tempDataVisible.value = true;
};
const tableLoading = ref(false);
const getModelPage = async () => {
  const params = {
    ...filterForm.value,
  };
  tableLoading.value = true;
  const res = await $api.modelPage(params);
  tableLoading.value = false;
  if (res && res.code === 0) {
    tableData.value = res.data.records;
    total.value = res.data.total;
  }
};
const confirmHandleModelStatus = async (data) => {
  // 0 未启用 1 已启用 2 已停用
  const res = await $api.updateModelStatus({
    id: data.id,
    enable: data.enable === 1 ? 2 : 1, // 如果启用则停用，如果停用或未启用，则启用
  });
  if (res && res.code === 0) {
    message.success("操作成功");
    getModelPage();
  }
};
const handleEdit = async (data) => {
  rowData.value = data;
  isEdit.value = true;
  addEquipVisible.value = true;
};
const handleFilter = () => {
  filterForm.value.current = 1;
  filterForm.value.size = 10;
  getModelPage();
}
onMounted(async () => {
  const routerParams = router.currentRoute.value?.query;
  if (routerParams && routerParams.supplierId) {
    await getModelPage();
    await getSupplierTypeTree();
    filterForm.value.supplierId = Number(routerParams.supplierId);
    supplierTypeList.value =
      supplierList.value.filter(
        (item) => item.supplierId === filterForm.value.supplierId
      )[0]?.supplierTypeEntities || [];

    await nextTick();
    filterForm.value.supplierTypeId = Number(routerParams.type);

    getModelPage();
  } else {
    getModelPage();
    getSupplierTypeTree();
  }
});
</script>

<style lang="less" scoped>
.ant-table {
  .ant-btn {
    padding: 4px 5px;
  }
}
.formInput {
  width: 155px;
}
.filterBtn {
  margin: 0 20px 20px 0;
  &:last-child {
    margin-right: 0;
  }
}
.tableContent {
  border-radius: 4px;
  background-color: #141414;
  padding: 8px;
}
</style>